<template>
  <div class="app-container">
    <el-table
      :data="foundlist.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!--序号-->
      <el-table-column align="center" label="序号" width="95" type="index" :index="indexMethod" prop="id" />
      <!--申请时间-->
      <el-table-column label="申请时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <!--物品名称-->
      <el-table-column label="物品名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <!--物品图片-->
      <el-table-column label="物品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="max-width: 100px; max-height: 100px;">
        </template>
      </el-table-column>
      <!--领取时间-->
      <el-table-column label="领取时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <!--审核状态-->
      <el-table-column
        class-name="status-col"
        label="审核状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <!--操作-->
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            round
            size="mini"
            @click="clickReserve(scope.row)"
          >编辑</el-button>
          <el-button
            type="danger"
            round
            size="mini"
            @click="handleDelete()"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="预约表单" :visible.sync="reserveDialog" width="60%">
      <el-form
        ref="reservationForm"
        :model="reservationForm"
        label-width="120px"
      >
        <el-form-item label="物品名称">
          <el-input v-model="reservationForm.title" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="reservationForm.trueName" type="text" :disabled="true" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="reservationForm.number" type="text" :disabled="true" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="reservationForm.phone" type="text" :disabled="true" />
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="reservationForm.colleges" placeholder="请选择您所在的学院" :disabled="true">
            <el-option label="计算机科学与工程学院/软件学院" value="SCSE" />
            <el-option label="文学院/新闻与传播学院" value="SJC" />
            <el-option label="马克思主义学院" value="MA" />
            <el-option label="政治与公共管理学院" value="FPCPA" />
            <el-option label="教育学部/教师教育学院（田家炳教育书院）" value="DE" />
            <el-option label="美术学院" value="ADC" />
            <el-option label="数学与统计学院" value="SMS" />
            <el-option label="化学与药学学院" value="FCP" />
            <el-option label="环境与资源学院" value="SER" />
            <el-option label="体育与健康学院" value="FPEH" />
            <el-option label="职业技术师范学院" value="VTTTC" />
            <el-option label="国际文化教育学院" value="IICE" />
            <el-option label="历史文化与旅游学院" value="FHCT" />
            <el-option label="法学院/律师学院" value="LS" />
            <el-option label="经济管理学院" value="FEM" />
            <el-option label="外国语学院" value="FLC" />
            <el-option label="音乐学院" value="MA" />
            <el-option label="物理科学与技术学院" value="SPST" />
            <el-option label="生命科学学院" value="SLS" />
            <el-option label="电子与信息工程学院/集成电路学院" value="FEIE" />
            <el-option label="设计学院" value="SD" />
          </el-select>
        </el-form-item>
        <el-form-item label="领取时间">
          <el-col :span="11">
            <el-date-picker v-model="reservationForm.date" type="datetime" placeholder="请选择领取日期" style="width: 100%;" />
          </el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="reservationForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reserveDialog2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import R from '@/assets/things/R.jpg'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        审核通过: 'success',
        审核未通过: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      foundlist: [{
        id: '1',
        display_time: '2024-04-10 07:38:11',
        title: '电脑',
        image: R,
        date: '2024-04-11 14:00:00',
        status: '审核未通过'
      }, {
        id: '2',
        display_time: '2024-04-10 07:38:11',
        title: '手机',
        image: R,
        date: '2024-04-11 14:00:00',
        status: '审核未通过'
      }, {
        id: '3',
        display_time: '2024-04-10 07:38:11',
        title: '鼠标',
        image: R,
        date: '2024-04-11 14:00:00',
        status: '审核通过'
      }, {
        id: '4',
        display_time: '2024-04-10 07:38:11',
        title: 'U盘',
        image: R,
        date: '2024-04-11 14:00:00',
        status: '审核通过'
      }, {
        id: '5',
        display_time: '2024-04-10 07:38:11',
        title: '电脑',
        image: R,
        date: '2024-04-11 14:00:00',
        status: '审核通过'
      }],
      reserveDialog: false,
      reservationForm: {
        id: '',
        title: '',
        trueName: '',
        number: '',
        phone: '',
        colleges: '',
        date: '',
        remark: ''
      },
      checked: true
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'number',
      'password',
      'signature',
      'age',
      'gender',
      'colleges',
      'email',
      'phone',
      'hobbies',
      'registrationDate'
    ])
  },

  methods: {
    indexMethod(index) {
      return index + 1
    },
    handleDelete() {
      // console.log(index)
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      // this.list.splice(index, 1)
    },
    clickReserve(row) {
      this.reserveDialog = true
      this.reservationForm.title = row.title
      this.reservationForm.date = row.date
      this.reservationForm.trueName = this.name
      this.reservationForm.number = this.number
      this.reservationForm.phone = this.phone
      this.reservationForm.colleges = this.colleges
      alert(this.number)
    }
  }
}
</script>
